<template>
  <view class="avatar-wrapper">
    <view class="avatar" v-if="type == 1">
      <img class="img" :src="avatar">
    </view>
    <view class="avatar-group" v-if="type == 2">
      <block  v-for="(it,i) of avatar" :key="i">
        <img class="img" :src="it" >
      </block>
    </view>
    <view class="avatar-text" v-if="type == 3">
      <text>{{ text | avatarText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'avatarGroup',
  data() {
    return {
      type: 0
    }
  },
  props: {
    //头像组
    avatar: Array | String,
    //提取名称的一个字
    text: String
  },
  created() {
    this.avatarType();
  },
  methods: {
    avatarType() {
      // 1单个头像，2群组聊天头像组，3默认头像提取文字
     if(!this.$u.test.isEmpty(this.avatar)){
       if((typeof this.avatar) == "string"){
         this.type = 1;
       }else {
         this.type = 2;
       }
     }else {
       this.type = 3;
     }
    }
  },
  filters:{
    avatarText(v){
      let length = v.length;
      if (length <= 2){
        return v;
      }else {
        return v.substring(length - 2,length);
      }

    }
  }
}
</script>

<style lang="scss" scoped="true">
.avatar-wrapper{
  width: 100upx;
  height: 100upx;
}
.avatar{
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  overflow: hiideen;
  background: #f1f1f1;
  .img{
    width:100%;
    height: 100%;
    border-radius: 50%;
  }
}
.avatar-group{
  display:flex;
  flex-wrap:wrap;
  .img{
    width: 50upx;
    height: 50upx;
    border-radius: 50%;
  }
}
.avatar-text{
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  overflow: hiideen;
  background: #e5e5e5;
  line-height: 100upx;
  text-align: center;
  font-size: 40upx;
  color: #fff;
}
</style>